<template>
  <div>
      <div class="card" style="display:flex; justify-content: center">
          欢迎访问校友帮——同学互助服务平台！
          祝你毕业顺利！
      </div>

      <div class="card" >
          <h2>系统公告</h2>
          <el-timeline >
              <el-timeline-item :timestamp="item.time" color="#0bbd87" placement="top" v-for="item in data.noticeData">
                  <h4>{{ item.title }}</h4>
                  <div style="display: flex; align-items: center; gap: 20px;">
                    <p style="width: 800px;">{{ item.content }}</p>
                      <div>
                          <el-image :src="item.picture" :preview-src-list="[item.picture]" :preview-teleported="true"
                                    style="width: 100px; height: 100px;" />
                      </div>
                  </div>
              </el-timeline-item>
          </el-timeline>
      </div>

  </div>
</template>
<script setup>
import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const data = reactive({
    user: JSON.parse(localStorage.getItem('userInfo')),
    title:null,
    content:null,
    picture:null,
    formVisible:false,
    form:{},

})
const loadNotice = () => {
    request.get('/notice/selectAll').then(res => {
        if (res.code === '200') {
            data.noticeData = res.data
            if (data.noticeData.length > 4) {
                data.noticeData = data.noticeData.slice(0, 4)
            }
        } else {
            ElMessage.error(res.msg)
        }
    })
}
loadNotice()

</script>